<template>
    <div>
        <div class="circle">
            <img id="userimg" v-bind:src="url">
        </div>
        <div id="user">{{username}}</div>
    </div>
</template>

<script>
import { findByIdService } from '@/api/user'

    export default {
        name: "baseUserInfoComponent",
        data(){
            return {
                username: '',
                url: '',
                userId:this.userId
            }
        },
        async mounted (){
            let result = await findByIdService(this.userId)
            this.username = result.data.name
            this.url = result.data.img
        },
        props:{
            userId:String
        }
    }
</script>

<style scoped>
    .circle {
        width: 80px; /* 设置宽度 */
        height: 80px; /* 设置高度 */
        border-radius: 50%; /* 将盒子变成圆形 */
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        float:left;
        margin-left: 10px;
    }
    #userimg{
        width:80px;
        height: 80px;
    }
    #user{
        position:relative;
        top:25px;
        left:10px;
    }
</style>